<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <!-- navbar -->
        <u-navbar bgColor="#fff" :safeAreaInsetTop="true" :placeholder="true" :fixed="true"
            @leftClick="back" title="单位管理"  rightIcon="search" @rightClick="rightClick">
        </u-navbar>
        <!-- select -->
        <uni-select class="uniselect" :style="{top:systemInfo.headerH+'px'}" 
            ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select">
        </uni-select>
        <!-- 占位 -->
        <view style="height:74rpx"></view>
 

        <!-- 版心 -->
        <view class="uni-area">
            <!-- 图表 -->
            <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 eleBgColor">
                <qiun-title-bar title="单位统计"/> <!-- 原为企业统计 -->
                <view class="u-flex enter-type" @tap="enterTypes.show=true">
                    <text class="u-m-r-16 u-font-28 uni-dec-color">{{enterTypes.label}}</text>
                    <u-icon name="arrow-down" size="14" color="#5D6672"></u-icon>
                </view>
                <view style="height:420rpx">
                    <qiun-data-charts type="pie" 
                        :tooltipShow="true" tooltipFormat="enterpriseManageTooltip"
                        :opts="enterprises.opts"
                        :chartData="enterprises" >
                    </qiun-data-charts>
                </view>
            </view>

            <!-- 单位 -->
            <view class="u-m-t-50 u-font-32 font-bold">单位列表</view><!-- 原为企业列表 据(基础信息优化工作20220326_APP优化)文档修改 -->
            <uni-item-enterprise class="u-m-t-30"  v-for="(tem,ind) in page.list" :key="ind" :listData="tem"/>
      
            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 企业类型筛选 -->
        <u-picker :show="enterTypes.show" :columns="enterTypes.data" keyName="label" :closeOnClickOverlay="true"
            @cancel="enterTypes.show=false" @close="enterTypes.show=false" @confirm="selectEnterTypes">
        </u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 设备信息
                systemInfo: uni.getStorageSync('systemInfo'),
                // 下拉选择数据
				selectData:[
                    { label: "属地", list: [], show: false, type: "districtId", value: '' },
                    { label: "企业类型", list: [], show: false, type: "dwlx", value: '' },
                ],
                // 企业统计图表
                enterTypes:{
                    show: false,
                    label: '按归属地统计',
                    id: 1,
                    data: [
                        [
                            { label: '按归属地统计', id: 1},
                            { label: '按单位类型统计', id: 2}, // 按企业类型统计
                        ]
                    ]
                },
                totalPrameter:{
                    districtId: '', // 区划值【非必传】
                    dwlx: '', // 企业类型【非必传】
                },
                enterprises:{
                    series: [
                        // {
                        //     data: [
                        //         // { name: "住建", value: 50 }, 
                        //     ],
                        //     format: 'yAxisDemo1', // label数据式化
                        // }
                    ],
                    opts: {
                        extra: {
                            pie: {
                                customRadius: 50,
                                offsetAngle: 110
                            }
                        }
                    }
                },
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'nomore',
                    total: 0,
                    list: [], // 列表
                },
			}
		},


        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.getEntList()
            }else{
                this.page.status = 'nomore'
            }
        },


		onLoad() {
            // 属地
            this.$tools.getNationFn(this,{},res=>{
                this.selectData.splice(0,1,res)
                this.totalPrameter.districtId = res.value
            })
            // 企业类型
            this.$tools.getEntTypeFn(this,res=>{
                this.selectData.splice(1,1,res)
                this.totalPrameter.dwlx = res.value
            })
            // 企业统计(默认按属地统计)
            this.getEntTotal()
            // 企业列表
            this.getEntList()
        },

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=enterprise&total='+this.page.total })
            },


            // 企业统计
            getEntTotal(){
                let api, str
                if( this.enterTypes.id == 1 ){
                    api = this.$apis.entTotalCD
                    str = '按照归属地-企业统计'
                }else{
                    api = this.$apis.entTotalSS
                    str = '按企业类型-企业统计'
                }
                // console.log('企业统计参数',this.totalPrameter)
                this.$request(this,api,this.totalPrameter).then(res=>{
                    // console.log(str,res)
                    let entTotal = 0
                    this.enterprises.series = [ { data: [], format: 'yAxisDemo1' } ]
                    res.map((v,i)=>{
                        entTotal += Number(v.value)
                    })
                    res.map((v,i)=>{
                        this.enterprises.series[0].data.push({
                            name: v.name + ' ' + ((v.value/entTotal)*100).toFixed(2)+'%',
                            value: v.value,
                            label: v.name
                        })
                    })
                }).then()
            },
            // 企业列表
            getEntList(){
                this.page.status = 'loading'
                const prameter = Object.assign(this.totalPrameter,this.paging)
                // console.log('企业列表参数',prameter)
                this.$request(this,this.$apis.entList,prameter).then(res=>{
                    // console.log('企业列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.status = 'nomore'
                        uni.$.toast('暂未查询到更多企业相关数据')
                    }
                }).then()
            },


            // 下拉选择
            select(e){
                this.totalPrameter[e.type] = e.value
                // 获取企业统计
                this.getEntTotal()
                // 获取企业列表
                this.paging.pageNum = 1
                this.page.list = []
                this.toTop()
                this.getEntList()
            },
            // 按归属地和企业类型筛选
            selectEnterTypes(e){
                this.enterTypes.label = e.value[0].label
                this.enterTypes.id = e.value[0].id
                this.enterTypes.show = false
                // 获取企业统计
                this.getEntTotal()
            },


            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .uniselect{
            width: 100%;
            position: fixed !important;
            left: 0;
        }
        .eleBgColor{
            background: $uni-text-color-inverse;
            position: relative;
            // 单位
            .unit{
                position: absolute;
                top: 36rpx;
                right: 30rpx;
            }
            // 筛选
            .enter-type{
                position: absolute;
                top: 30rpx;
                right: 30rpx;
            }
        }
    }
</style>
